import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';
import { Modal } from 'antd';
const { confirm } = Modal

const valueEnum = {
    0: 'close',
    1: 'running',
    2: 'online',
    3: 'error',
};

export type TableListItem = {
    key: number;
    name: string;
    containers: number;
    creator: string;
    status: string;
    createdAt: number;
    memo: string;
};
const tableListDataSource: TableListItem[] = [];

const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];

for (let i = 0; i < 5; i += 1) {
    tableListDataSource.push({
        key: i,
        name: 'AppName',
        containers: Math.floor(Math.random() * 20),
        creator: creators[Math.floor(Math.random() * creators.length)],
        status: valueEnum[Math.floor(Math.random() * 10) % 4],
        createdAt: Date.now() - Math.floor(Math.random() * 100000),
        memo: i % 2 === 1 ? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴' : '简短备注文案',
    });
}



export default () => {
    const handleDelete = () => {
        confirm({
            title: "删除",
            content: "确定要删除吗？",
            onOk: async () => {

            },
            cancelText: "取消",
            okText: "确定",
        });
    }

    const columns: ProColumns<TableListItem>[] = [
        {
            title: '部署ID',
            width: 80,
            dataIndex: 'name',
            search: false,
            render: (_) => <a>{_}</a>,
        },
        {
            title: '流程名称',
            dataIndex: 'containers',
            width: 100,
        },
        {
            title: '部署时间',
            width: 80,
            dataIndex: 'status',
            valueType: 'date',
            search: false,

        },

        {
            title: '操作',
            width: 180,
            key: 'option',
            valueType: 'option',
            render: () => [
                <a key="link" onClick={()=> handleDelete()}>删除</a>,
            ],
        },
    ];
    return (
        <PageContainer>
            <ProTable<TableListItem>
                columns={columns}
                request={(params, sorter, filter) => {
                    return Promise.resolve({
                        data: tableListDataSource,
                        success: true,
                    });
                }}
                rowKey="key"
                dateFormatter="string"
                headerTitle="流程部署列表"
            // toolBarRender={false}
            />
        </PageContainer>
    );
};